<template>
  <div class="demo">
     <h2>学校名称:{{ schoolName }}</h2>
     <h2>学校地址:{{ schooleAddress }}</h2>
   </div>
</template>

<script>
import pubsub from 'pubsub-js'
export default {
    name:"School",
    data:function(){
        return {
            schoolName:'武汉科技大学',
            schooleAddress:"武汉市武昌区",
            stuName:''
        }
    },
    methods:{
       getStuName(messageName,data){
        //console.log("获取到事件的名称",messageName);
        console.log("获取到Student组件传递的数据",data);
       }
    },
    mounted(){
        // this.pubsubId = pubsub.subscribe("message",function(messageName,data){
        //     console.log("获取到事件的名称",messageName);
        //     console.log("获取到Student组件传递的数据",data);
        //     console.log(this) //此时的this是undefined 由于引入的是三方的库，所以this不受vue的管理 要想用this写成箭头函数
        // })
        // this.pubsubId = pubsub.subscribe("message",(messageName,data)=>{
        //     console.log("获取到事件的名称",messageName);
        //     console.log("获取到Student组件传递的数据",data);
        //     console.log(this) //此时的this是vueComponent
        // }) 
        this.pubsubId = pubsub.subscribe("message",this.getStuName) 
    },
    beforeDestroy(){
        console.log("组件销毁前，移除发布");
        pubsub.unsubscribe(pubsubId)
    }
}
</script>

<style lang="css" scoped>
    .demo{
        background-color: green;
    }
</style>